<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ChatGPT 演示</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        body {
            margin: 0;
            padding: 20px;
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }

        .container {
            display: flex;
            max-width: 1920px;
            margin: 0 auto;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            min-height: 756px;
        }

        .history-container {
            width: 300px;
            background-color: #f5f5f5;
            padding: 20px;
            overflow-y: auto;
            border-radius: 10px;
        }

        .history-container h2 {
            margin-bottom: 10px;
        }

        .history-item {
            padding: 10px;
            margin-bottom: 10px;
            background-color: white;
            border-radius: 5px;
            cursor: pointer;
        }

        .history-item:hover {
            background-color: #e0e0e0;
        }

        .chat-container {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            height: 846px;
        }

        .chat-inner {
          height: 45rem;
        }

        .message {
            margin-bottom: 20px;
            display: flex;
            gap: 10px;
        }

        .user-message {
            flex-direction: row-reverse;
        }

        .avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #e0e0e0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
        }

        .content {
            max-width: 70%;
            padding: 12px 16px;
            border-radius: 12px;
        }

        .user-message .content {
            background-color: #007bff;
            color: white;
        }

        .bot-message .content {
            background-color: #f1f1f1;
            color: #333;
        }

        .timestamp {
            font-size: 12px;
            color: #666;
            margin-top: 4px;
        }

        .input-container {
            padding: 20px;
            border-top: 1px solid #ddd;
            display: flex;
            gap: 10px;
        }

        input {
            flex: 1;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 16px;
        }

        button {
            padding: 12px 24px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
        }

        button:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <!-- 历史记录容器 -->
            <div class="history-container">
                <h2>123</h2>
                <div
                    class="history-item"
                    v-for="(history, index) in historyList"
                    :key="index"
                    @click="loadHistory(history)"
                >
                    {{ `会话 ${index + 1}` }}
                </div>
            </div>

            <!-- 聊天容器 -->
            <div class="chat-container">
                <div class="chat-inner" ref="chatContainer">
                    <div
                        v-for="(message, index) in messages"
                        :key="index"
                        class="message"
                        :class="message.isUser ? 'user-message' : 'bot-message'"
                    >
                        <div class="avatar">
                            {{ message.isUser ? '我' : 'AI' }}
                        </div>
                        <div class="content">
                            {{ message.content }}
                            <div class="timestamp">
                                {{ formatTime(message.timestamp) }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="input-container">
                    <input
                        v-model="inputMessage"
                        @keyup.enter="sendMessage"
                        placeholder="输入消息..."
                        :disabled="loading"
                    >
                    <button @click="sendMessage" :disabled="loading || !inputMessage">
                        {{ loading ? '发送中...' : '发送' }}
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        const { createApp, ref, nextTick } = Vue;

        createApp({
            setup() {
                const messages = ref([]);
                const historyList = ref([]);
                const inputMessage = ref('');
                const loading = ref(false);
                const chatContainer = ref(null);

                const formatTime = (date) => {
                    return date.toLocaleTimeString('zh-CN', { 
                        hour: '2-digit', 
                        minute: '2-digit' 
                    });
                };

                const addMessage = (content, isUser) => {
                    messages.value.push({
                        content,
                        isUser,
                        timestamp: new Date()
                    });
                };

                const simulateApiCall = async (prompt) => {
                    await new Promise(resolve => setTimeout(resolve, 1000));
                    
                    const responses = [
                        "这是一个示例回答。",
                        "Vue3 是一个流行的JavaScript框架。",
                        "我可以帮助您解答各种问题。",
                        "请随时问我任何问题。"
                    ];
                    return responses[Math.floor(Math.random() * responses.length)];
                };

                const sendMessage = async () => {
                    if (!inputMessage.value.trim()) return;

                    const userMessage = inputMessage.value;
                    addMessage(userMessage, true);
                    inputMessage.value = '';
                    loading.value = true;
                    saveToHistory()

                    try {
                        const response = await simulateApiCall(userMessage);
                        addMessage(response, false);
                    } catch (error) {
                        addMessage('抱歉，出现了一些问题，请稍后再试。', false);
                    } finally {
                        loading.value = false;
                        await nextTick();
                        chatContainer.value.scrollTo({
                            top: chatContainer.value.scrollHeight,
                            behavior: 'smooth'
                        });
                    }
                };

                const saveToHistory = () => {
                  console.log('saveToHistory', messages)
                    historyList.value.push([...messages.value]);
                    // messages.value = [];
                };

                const loadHistory = (history) => {
                    messages.value = [...history];
                    nextTick(() => {
                        chatContainer.value.scrollTo({
                            top: chatContainer.value.scrollHeight,
                            behavior: 'smooth'
                        });
                    });
                };

                return {
                    messages,
                    historyList,
                    inputMessage,
                    loading,
                    chatContainer,
                    formatTime,
                    sendMessage,
                    saveToHistory,
                    loadHistory
                };
            }
        }).mount('#app');
    </script>
</body>
</html>